import getState from "@/api/state";
import ZuiEchart from "@/template/zuiEchart/zuiEchart";
import ColoredDots from "@/template/ColoredDots/ColoredDots";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";

const Home4 = ({ condition }) => {
    const [message, setMessage] = useState("暂无数据")
    const [loading, setLoading] = useState(false)


    const [state, setState] = useState([
        {
            name: '全险种',
            data: [

            ]
        },
        {
            name: '全险种',
            data: [

            ]
        },
        {
            name: '全险种',
            data: [
            ]
        },
        {
            name: '全险种',
            data: [

            ]
        }
    ]);




    useEffect(() => {
        getState({
            apiUrl: "/cifgp-core-api/synt/monthAndYear",
            state,
            condition: {...condition,  cType: "syntapplyUsage" },
            setState,
            setLoading,
            setMessage,
            nameList:["出险1年","出险2年","出险3年","出险4年","出险5年","5年以上"]
        })
    }, [condition])


    return (
        <>

            <ZuiEchart
                message={message}
                loading={loading}
                style={{ width: "35%", height: "350px" }}
                title="出险次数分布"
                data={state}
                defaultModule="pie"
                pieType={"2"}
                btn={state.map(item => item.name)}
            />
        </>
    )
}
export default Home4;